@svgr/babel-preset

What is @svgr/babel-preset?

The @svgr/babel-preset package is a Babel preset for transforming SVG icons into React components. This allows developers to import SVG files directly as React components in their projects, facilitating easier manipulation and integration of SVGs within React applications.

What are @svgr/babel-preset's main functionalities?

SVG to React Component Transformation

This feature allows SVG files to be imported directly as React components. This is useful for developers who want to use SVGs as components without manually converting them. The code shows how an SVG file can be imported and used as a React component.

import ReactComponent from './icon.svg';

Customizable SVG Transformation

Developers can customize how SVGs are transformed into React components. Options such as disabling SVGO optimization or adding a title prop to the SVG can be configured. The code sample demonstrates how to customize the Babel preset configuration for SVG transformation.

{
  "presets": [
    "@svgr/babel-preset",
    {
      "icon": true,
      "svgo": false,
      "titleProp": true
    }
  ]
}

Other packages similar to @svgr/babel-preset

react-svg-loader

react-svg-loader is similar to @svgr/babel-preset as it also allows importing SVGs as React components. However, it is implemented as a webpack loader rather than a Babel preset, which might suit different project setups.

babel-plugin-inline-react-svg

This plugin provides similar functionality by allowing SVGs to be imported as React components. It differs in that it is a Babel plugin, offering more integration with Babel's ecosystem and possibly differing in configuration and performance characteristics.

README

@svgr/babel-preset

Install

npm install --save-dev @svgr/babel-preset

Usage

.babelrc

{
  "presets": [["@svgr/babel-preset", { "svgProps": { "width": 200 } }]]
}

License

MIT